<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>魔方相册</title>
    <link rel="stylesheet" href="./魔方相册.css">
    <style>
        .title {
            font-size: 34px;
            background-clip: text;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(45deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
            margin: 0 auto;
            z-index: 99;
            position: absolute;
            top: 40px;
            animation: dianw 1s infinite linear;
            cursor: pointer;
        }
        @keyframes dianw {
            to {
                filter: hue-rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="container" id="root">
        <div class="title" @click="changeoutin">{{title}}</div>
        <div class="box">
            <div class="out-div" v-for="(item,index) in arr" :key="index"
                :style="`background-image:url(${out_div[item].url})`">

            </div>
            <template>
                <div class="in-div" v-for="(item,i) in arr" :key="i+6"
                    :style="`background-image:url(${in_div[item].url})`">>
                </div>
            </template>
            <!-- <div class="in-div" v-for="(item,i) in arr" :key="i+6" :style="`background-image:url(${in_div[item].url})`">>
                <img :src="item.url" alt="">
           </div>  -->
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    title: "点我",
                    out_div: [
                        { url: "./img/宵宫证件照.png", },
                        { url: "./img/啊影证件照.png" },
                        { url: "./img/阿贝多证件照.png" },
                        { url: "./img/巴巴托斯证件照.png" },
                        { url: "./img/可莉证件照.png" },
                        { url: "./img/叶天帝证件照.png" },
                    ],
                    in_div: [
                        { url: "./img/烟绯证件照.png" },
                        { url: "./img/早柚证件照.png" },
                        { url: "./img/云堇证件照.png" },
                        { url: "./img/九条.png" },
                        { url: "./img/久岐忍.png" },
                        { url: "./img/行秋证件照.png" },
                    ],
                    arr: [0, 1, 2, 3, 4, 5]
                }
            },
            methods: {
                changeoutin() {
                    let t = []
                    t = this.in_div // in_div
                    this.in_div = this.out_div
                    this.out_div = t
                },
                randersort() {
                    this.arr.sort((a, b) => {
                        return Math.random() > 0.5 ? -1 : 1
                    })
                }
            },
            mounted() {
                setInterval(() => {
                    this.changeoutin()
                }, 10000);
                setInterval(() => {
                    this.randersort()
                }, 3000);
            },
        })
    </script>
</body>



</html>